<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: html}">
<head>
    <title th:text="${poem.title + ' - 诗词平台'}">诗词详情</title>
</head>
<body>
<div th:fragment="content">
    <div class="poem-detail">
        <h1 class="text-center mb-4" th:text="${poem.title}">诗词标题</h1>
        <div class="text-center text-muted mb-4">
            <span>作者：</span>
            <a th:href="@{/user/{id}(id=${poem.author.id})}"
               th:text="${poem.author.username}">作者名</a>
            <span class="mx-2">|</span>
            <span th:text="${#temporals.format(poem.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</span>
            <span class="mx-2">|</span>
            <span th:text="${poem.viewCount + ' 阅读'}">阅读数</span>
        </div>

        <div class="poem-content mb-4">
            <pre class="text-center" th:text="${poem.content}">诗词内容</pre>
        </div>

        <div class="d-flex justify-content-center gap-3 mb-4">
            <button class="btn btn-outline-primary"
                    th:classappend="${poem.liked ? 'active' : ''}"
                    th:onclick="'likePoem(' + ${poem.id} + ')'">
                <i class="bi bi-heart-fill"></i>
                <span th:text="${poem.likeCount + ' 赞'}">点赞数</span>
            </button>
            <button class="btn btn-outline-secondary"
                    th:classappend="${poem.bookmarked ? 'active' : ''}"
                    th:onclick="'bookmarkPoem(' + ${poem.id} + ')'">
                <i class="bi bi-bookmark-fill"></i>
                <span>收藏</span>
            </button>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
            <h3 class="mb-3">评论 <span th:text="'(' + ${poem.commentCount} + ')'"></span></h3>

            <!-- 发表评论 -->
            <div class="mb-4" sec:authorize="isAuthenticated()">
                <form th:action="@{/api/comments}" method="post" class="comment-form">
                    <input type="hidden" name="poemId" th:value="${poem.id}">
                    <div class="mb-3">
                            <textarea class="form-control" name="content" rows="3"
                                      placeholder="写下你的评论..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">发表评论</button>
                </form>
            </div>

            <!-- 评论列表 -->
            <div class="comment-list">
                <div th:each="comment : ${comments}" class="comment-item mb-3">
                    <div class="d-flex">
                        <img th:src="${comment.user.avatarUrl}"
                             class="rounded-circle me-2" style="width: 40px; height: 40px;">
                        <div>
                            <div class="fw-bold" th:text="${comment.user.username}">用户名</div>
                            <div class="text-muted small"
                                 th:text="${#temporals.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}">
                                评论时间
                            </div>
                            <div class="mt-2" th:text="${comment.content}">评论内容</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    function likePoem(poemId) {
        fetch(`/api/poems/${poemId}/like`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
    }

    function bookmarkPoem(poemId) {
        fetch(`/api/poems/${poemId}/bookmark`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
    }
</script>
</body>
</html> 